<template>
  <div id="app">
    <img class="logo" src="./assets/electron.png" />
    <img class="logo" src="./assets/vue.png" />
    <img class="logo" src="./assets/webpack.png" />
    <div>
      appId:<input type="text" v-model="appId" /> token:<input
        type="text"
        v-model="token"
      />
      channel:<input type="text" v-model="channel" /> userId:<input
        type="text"
        v-model="userId"
      />
      <button @click="init">init</button>
      <button @click="start" v-show="!connectStatus">start</button>
      <button @click="pushVideo">pushVideo</button>
      <button @click="stop" v-show="connectStatus">stop</button>
    </div>
    <div class="hello">
      <h4>Local video</h4>
      <div class="video" id="me"></div>
      <h4>Remote video</h4>
      <div class="video" id="remote-container"></div>
    </div>
    <div id="console"></div>
  </div>
</template>

<script>
import Hello from "./components/Hello.vue";
import AgoraRtcEngine from "agora-electron-sdk";
import AgoraRTC from "agora-rtc-sdk-ng";
import path from "path";
import os from "os";

// With shell.openExternal(url) is how
// external urls must be handled, not href
const shell = require("electron").shell;

// 处理错误的函数
const handleError = function(err) {
  console.log("Error: ", err);
  alert("【err.info】:" + err.info + ",【err.msg】:" + err.msg);
};

export default {
  components: {
    Hello,
  },
  data() {
    return {
      rtc: {
        // 用来放置本地客户端。
        client: AgoraRTC.createClient({
          mode: "rtc",
          codec: "vp8",
        }),
        // 用来放置本地音视频频轨道对象。
        localAudioTrack: null,
        localVideoTrack: null,
      },
      options: {
        userId: null,
        // 替换成你自己项目的 App ID。
        appId: "06943e33caee4e80a23a6cb42f223c02",
        // 传入目标频道名。
        channel: "demo_channel_name",
        // 如果你的项目开启了 App 证书进行 Token 鉴权，这里填写生成的 Token 值。
        token:
          "00606943e33caee4e80a23a6cb42f223c02IABgbo8liPLVhzGUOwDvsWCoYUAhZhK2dtHaMzwAIOYc8qDfQtYAAAAAEAD4YHXYT5mbYAEAAQBEmZtg",
      },
      connectStatus: 0,
    };
  },
  methods: {
    link: (url) => {
      shell.openExternal(url);
    },
    stop() {},
    start() {},
    pushVideo() {},
    registAdd() {},
    registRemove() {},
    init() {
      
    },
  },

  mounted: function() {},
};
</script>

<style>
* {
  font-family: sans-serif;
}
h1,
h4 {
  text-align: center;
}
#me {
  position: relative;
  width: 50%;
  margin: 0 auto;
  display: block;
}
#me video {
  position: relative !important;
}
#remote-container {
  display: flex;
}
#remote-container video {
  height: auto;
  position: relative !important;
}
</style>
